<template>
    <div :style="fontStyle">
        <div>{{rate}}</div>
        <div class="rate" @mouseout="mouseOut">
            <span @mouseover="mouseOver(num)" v-for="num in 5">○</span>
            <span class="hollow" :style="fontwidth">
                <span @click="onRate(num)" @mouseover="mouseOver(num)" v-for="num in 5">●</span>
            </span>
        </div>
    </div>
</template>

<script setup>
import {defineProps, defineEmits, ref, computed} from 'vue'
let props = defineProps({
    modelValue: Number,
    theme: {type: String, default: 'orange'}
})
let rate = computed(() => "●●●●●○○○○○".slice(5 - props.modelValue, 10 - props.modelValue))
const theme0bj={
    'black': '#000',
    'white': '#fff',
    'red': '#f5222d',
    'orange': '#fa541c',
    'yellow': '#fadb14',
    'green':'#73d13d',
    'blue':'#4@a9ff'
}
const fontStyle = computed(() => {
    return `color: ${theme0bj[props.theme]};`
})

let width = ref(props.modelValue)
function mouseOver(i) {
    width.value = i
}
function mouseOut() {
    width.value = props.modelValue
}
const fontwidth = computed(() => `width: ${width.value}em;`)
let emits = defineEmits(['update:modelValue'])
function onRate(num) {
    emits('update:modelValue', num)
}
</script>

<style scoped>
.rate {
    position: relative;
    display: inline-block;
    font-size: 36px;
}
.hollow {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
}
</style>